<template>
    <TodoInput @add="addTodo"></TodoInput>
    <TodoList :data="newData" @del="delTodo" @getFlag="handleGetFlag" :allCount="allCount" :completedCount="completedCount" :activeCount="activeCount"></TodoList>
</template>
<script setup>
import TodoInput from './todoInput.vue';
import TodoList from './todoList.vue';
import { ref,computed } from 'vue';
//功能
//1.列表展示

//2.增加功能

//3.删除功能

//4.选中和未选中

//5.展示数量

//6.永久存储

//声明数据
let data = ref([
    {
        id:1,
        todo:"吃饭",
        isCompleted:false
    },
    {
        id:2,
        todo:"睡觉",
        isCompleted:false
    },
    {
        id:3,
        todo:"打豆豆",
        isCompleted:false
    },
])
//增加todo
let addTodo = (input)=>{
    console.log(input)
    //声明一个对象再push
    let obj = {
        id:Math.random().toString(32).substring(2),
        todo:input,
        isCompleted:false
    }
    data.value.push(obj)
}

//删除todo

let delTodo = input=>{
    console.log(input)
    data.value.splice(input,1)
}

//接收筛选的字段

let filterFlag=ref("all")

let handleGetFlag = (flag)=>{
    console.log(flag)
    filterFlag.value =flag
}

//声明三个响应式变量，根据计算属性来进行赋值操作
let allCount =ref(0)
let completedCount = ref(0)
let activeCount = ref(0)

//处理数据
let newData = computed(()=>{
    let all = data.value     //全部的数据
    let completed = data.value.filter(item=>item.isCompleted);
    let active = data.value.filter(item=>!item.isCompleted)
    allCount.value = all.length
    completedCount.value = completed.length
    activeCount.value = active.length

    switch(filterFlag.value){
        case 'all':
            return all
        case 'completed':
            return completed
        case 'active':
            return active
    }
})
</script>